<template>
  <div class="cityChoose">
    <!--<span class="close-btn" @click="togglePanel()"></span>-->
    <div class="panel">
      <input type="text" class="search" placeholder="请输入城市名" v-model="keyword"
             @focus="isMatch = true;isClickSelected=false;">
      <div class="matchCity" v-show="marchShow">
        <ul>
          <li v-for="item in marchList" @click="setSelCity(item.cnname,item.code)"
              :class="[item.code!=cur_city.code&&item.code!=firstCityCode&&item.code!=secondCityCode?'normal':'default']"
              :title="item.code!=cur_city.code&&item.code!=firstCityCode&&item.code!=secondCityCode?'':'当前城市已选'">{{item.cnname}}</li>
        </ul>
      </div>
      <EasyScrollbar :barOption="listBar">
        <div class="cityList">
          <p>城市列表</p>
          <!--<ul>-->
          <!--<li v-for="city in cityList" @click="getCityCode(city.cnname,city.code)">{{city.cnname}}</li>-->
          <!--</ul>-->
          <table cellpadding="0" cellspacing="0">
            <tr v-for="city in cityList">
              <td class="cityLetter">{{city.letter}}</td>
              <td><span v-for="item in city.cityList" @click="setSelCity(item.cnname,item.code)"
                        :class="[item.code!=cur_city.code&&item.code!=firstCityCode&&item.code!=secondCityCode?'normal':'default']"
                        :title="item.code!=cur_city.code&&item.code!=firstCityCode&&item.code!=secondCityCode?'':'当前城市已选'">{{item.cnname}}</span>
              </td>
            </tr>
          </table>
        </div>
      </EasyScrollbar>
    </div>
    <div class="confirm">
      <span class="right-btn" @click="confirmBtn(true)"></span>
      <span class="error-btn" @click="confirmBtn(false)"></span>
    </div>
    <div class="trangle"  @click="togglePanel()"></div>
  </div>
</template>

<script>
  import {mapGetters, mapMutations} from 'vuex'
  import MYCONFIG from '../../myconf'
  export default {
    name: "CityChoose",
    data () {
      return {
        keyword: '',
        isMatch: true,
        marchShow: false,
        marchList: [],
        cityList: [],
        listBar: {
          barColor: "#709003d4",   //滚动条颜色
          barWidth: 5,           //滚动条宽度
          railColor: "#A8C54F",     //导轨颜色
          barMarginRight: 0,     //垂直滚动条距离整个容器右侧距离单位（px）
          barMaginBottom: 0,     //水平滚动条距离底部距离单位（px)
          barOpacityMin: 0.2,      //滚动条非激活状态下的透明度
          zIndex: "auto",        //滚动条z-Index
          autohidemode: true,     //自动隐藏模式
          horizrailenabled: false,//是否显示水平滚动条
        },
        isClickSelected: false,
        sel_city: {
          name: '',
          code: ''
        },
      }
    },
    computed: {
      ...mapGetters(['cur_city', 'firstCityCode', 'secondCityCode']),
    },
    methods: {
      // getCityList(){
      //   let _this = this;
      //   this.$http.post(MYCONFIG.service.root+'/search/city/', {
      //
      //   }, {emulateJSON: true}).then(response => {
      //     if(response){
      //        let data = response.data;
      //        _this.cityList = data;
      //     }
      //   }, response => {
      //
      //   });
      // },
      getCityList(){
        let _this = this;
        this.$http.get('./static/data/cityList.json').then(response => {
          if (response) {
            let city = response.data.city;
            _this.cityList = city;
          }
        }, response => {

        });

      },
      getCityCode(name, code){
        if (code == this.cur_city.code || code == this.firstCityCode || code == this.secondCityCode) {
          return;
        }
        let city = {
          name: name,
          code: code
        };
        this.$emit('getCityCode', city);
//        this.isMatch = false;
        this.marchShow = false;
        this.keyword = '';
      },
      setSelCity(name, code){
        if (code != this.cur_city.code && code != this.firstCityCode && code != this.secondCityCode) {
          this.sel_city = {
            name: name,
            code: code
          }
          this.keyword = name;
          this.isClickSelected = true;
          this.marchShow = false;
        } else {
          return;
        }
      },
      confirmBtn(bool){
        let name = this.sel_city.name;
        let code = this.sel_city.code;
        if (bool) {
          if (this.sel_city.name) {
            this.getCityCode(name, code);
          }
        } else {
          this.sel_city = {
            name: '',
            code: ''
          };
          this.keyword = '';
          this.$emit('closePanel');
        }
        this.isClickSelected = false;
//        this.isMatch == true;
      },
      togglePanel(){
        this.$emit('closePanel');
        this.isClickSelected = false;
      }
    },
    mounted(){
      this.getCityList();
    },
    watch: {
      keyword(val, oldval) {
        let _this = this;
        if (_this.isMatch == false) return;
        if (val != '' && val != oldval) {
          if (!_this.isClickSelected) {
            this.$http.post(MYCONFIG.service.root + '/search/city/' + this.keyword, {emulateJSON: true}).then(response => {
              if (response) {
                let data = response.data;
                if (data.length > 0) {
                  _this.marchList = data;
                  _this.marchShow = true;
                }
              } else {
                _this.marchShow = false;
              }
            }, response => {

            });
          }
        } else {
          this.marchShow = false;
        }
      }
    }
  }
</script>

<style scoped>
  .cityChoose {
    position: absolute;
    bottom: 17px;
    left: -38px;
    width: 200px;
    height: 325px;
    z-index: 200;
  }

  .close-btn {
    position: absolute;
    top: -6px;
    right: -6px;
    width: 20px;
    height: 20px;
    cursor: pointer;
    background: url("../../../static/images/confirm/close-city.png") no-repeat;
    transition: all ease 0.4s;
    background-size: cover;
    z-index: 200;
  }

  .close-btn:hover {
    transition: all ease 0.4s;
    background-image: url("../../../static/images/confirm/close-city-hover.png");

  }

  .panel {
    position: relative;
    width: 180px;
    height: 241px;
    background-color: rgba(189, 250, 7, 0.89);
    padding: 10px;
  }

  .trangle {
    width: 0;
    height: 0;
    border-width: 25px;
    border-style: solid;
    border-color: rgba(207, 255, 13, 0.83) transparent transparent transparent;
    position: relative;
    left: 75px;
    cursor: pointer;
  }

  .search {
    width: 160px;
    height: 28px;
    padding-left: 20px;
    background: rgba(255, 255, 255, 0.5) url("../../../static/images/confirm/search-icon.png") no-repeat 3px center;
    border: 1px solid #6d6d6d;
    margin-bottom: 5px;
    margin-top: 5px;
  }

  .matchCity {
    position: absolute;
    width: 180px;
    min-height: 27px;
    top: 46px;
    left: 11px;
    z-index: 201;
    background-color: #d2ec83;
    max-height: 200px;
    overflow-y: auto;
  }

  .matchCity ul {
    list-style: none;
    margin: 0;
    padding-bottom: 5px;
  }

  .matchCity li {
    cursor: pointer;
    margin-top: 3px;
    line-height: 18px;
    text-indent: 5px;
  }

  .matchCity li:hover {
    background-color: #a4d9076b;
  }

  .cityList p {
    font-size: 14px;
  }

  .cityList ul {
    list-style: none;
    margin: 0;
    padding: 0;
  }

  .cityList li {
    float: left;
    margin-right: 5px;
    margin-bottom: 3px;
    margin-top: 3px;
    cursor: pointer;
  }

  .cityList li:hover {
    color: #d0093b;
  }

  .cityLetter {
    font-size: 16px;
    line-height: 20px;
    font-weight: 700;
    padding: 0;
    margin: 0;
  }

  .cityList {
    height: 201px;
    color: #000;
  }

  .cityList table {
    width: 170px;
    white-space: normal;
  }

  .cityList td {
    padding-top: 3px;
    vertical-align: top;
    padding-right: 5px;
  }

  .cityList td.cityLetter {
    color: #000000;
    opacity: 0.5;
  }

  .cityList span {
    /*white-space: nowrap;*/
    margin-right: 11px;
    line-height: 18px;

  }

  .normal {
    color: #000;
    cursor: pointer;
  }

  .normal:hover {
    color: #d0093b;
  }

  .default {
    color: #969191;
    cursor: text;
  }

  .confirm {
    width: 100%;
    height: 34px;
    border-top: solid 1px #719408;
    background-color: #a4d907;
    display: flex;
  }

  .confirm span:hover {
    background-color: #91c407;
  }

  .right-btn {
    flex-grow: 1;
    background: url("../../../static/images/confirm/right-0.png") no-repeat center;
    border-right: solid 1px #719408;
  }

  .error-btn {
    flex-grow: 1;
    background: url("../../../static/images/confirm/error-0.png") no-repeat center;
  }
</style>
